<template>
  <div class="Mask">
    <div>
      <!--商品分类-->
      <div class="categoryMain" style="margin-bottom: 20px">
        <div class="">
          <div class="list acea-row row-middle">
            <!-- <div class="categoryBtn">
              {{ $t("page.index.Categories") }}
            </div> -->
            <a
              @click="goUrl(item.link)"
              class="item"
              :class="{ 'font-color': item.link === $route.path }"
              v-for="(item, index) in headerList"
              :key="index"
              >{{ item.label }}
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="index wrapper_1200" style="">
      <!--轮播分类-->
      <div class="wrapper" style="display: flex;">
        <div class="slider-banner banner" style="width: 698px;height: 310px;">
          <client-only>
            <div  v-swiper:mySwiper="swiperOption">
              <div class="swiper-wrapper">
                <div
                  @click="goUrl(item.link)"
                  class="swiper-slide"
                  v-for="(item, index) in swiperData"
                  :key="index"
                  v-if="index < 10"
                >
                  <img :src="item.image" />
                </div>
              </div>
              <!-- <div
                class="swiper-pagination paginationBanner"
                slot="pagination"
              ></div> -->
              <!-- <div class="swiper-button-prev" slot="pagination"></div>
              <div class="swiper-button-next" slot="pagination"></div> -->
            </div>
          </client-only>
        </div>
        <div class="swiperRight1">
            <div>
                <div  v-swiper:mySwiper1="swiperOption1">
                  <div class="swiper-wrapper">
                    <div
                      class="swiper-slide"
                      v-for="(item, index) in swiperData1"
                      :key="index"
                      v-if="index < 2"
                    >
                      <img :src="item.image" />
                    </div>
                     <!-- <img  src="../utils/img/bannertwo.png" alt=""> -->
                  </div>
                  </div>
            </div>
            <div>
              <div  v-swiper:mySwiper3="swiperOption3">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item, index) in swiperData3"
                    :key="index"
                    v-if="index < 2"
                  >
                    <img :src="item.image" />
                  </div>
                </div>
                </div>
            </div>
        </div>
        <div class="swiperRight1">
          <div style="margin: 0;">
            <div  v-swiper:mySwiper2="swiperOption2">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="(item, index) in swiperData2"
                  :key="index"
                  v-if="index < 2"
                >
                  <img style="width: 242px; height: 152px;" :src="item.image" />
                </div>
              </div>
          </div>
          </div>
          <div style="margin-left: 6px; margin-top: 6px;">
            <img src="../utils/img/banberFour.png" alt="">
          </div>
        </div>
        <!-- <div class="category acea-row row-middle" @mouseleave="leave()">
          <div
            class="sort"
            :class="categoryList.length > 10 ? 'sort-scroll' : ''"
          >
            <div
              class="item acea-row row-between-wrapper"
              :class="index === current ? 'bg-color' : ''"
              v-for="(item, index) in categoryList"
              :key="index"
              @mouseenter="enter(index)"
            >
              <div class="name line1" @click="goCate('', '', item)">
                {{ item.cate_name }}
              </div>
              <div class="iconfont icon-you"></div>
            </div>
          </div>
          <div class="sortCon" v-if="seen && categoryCurrent">
            <div class="erSort">
              <div
                class="item acea-row"
                v-for="(item, index) in categoryCurrent.children"
                :key="index"
              >
                <div
                  class="name line1"
                  @click="goCate('', categoryCurrent, item)"
                >
                  {{ item.cate_name }}
                </div>
                <div class="cateList">
                  <span
                    class="cateItem"
                    @click="goCate(categoryCurrent, item, itemn)"
                    v-for="(itemn, indexn) in item.children"
                    :key="indexn"
                  >
                    {{ itemn.cate_name }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <!-- <div class="seckill acea-row row-middle"> -->
      <!-- <img src="../assets/images/index_ad2.png" style="max-width:100%;" /> -->
      <!-- <img src="../assets/images/01.gif" style="max-width:100%;"  @click="goUrl('/shop_street')"/>
		<img src="../assets/images/01.jpg" style="max-width:100%;"  @click="goUrl('/goods_list?type=hot')"/>
		<img src="../assets/images/02.png" style="max-width:100%;"  @click="goUrl('/goods_list?type=best')"/>
		<img src="../assets/images/03.png" style="max-width:100%;"  @click="goUrl('/goods_cate')"/>
      </div> -->
      <!--秒杀-->
      <div
        class="seckill acea-row row-middle"
        v-if="seckillList.length"
        id="page1"
      >
        <div class="header">
          <div class="title">{{ $t("page.index.seckilling") }}</div>
          <div class="timeCurrent">
            <span>{{ currentTime }} </span>{{ $t("page.index.poinfield") }}
          </div>
          <div class="lines"></div>
          <div class="tip">{{ $t("page.index.leftuntiltheend") }}</div>
          <countDown
            :is-day="false"
            :tip-text="' '"
            :day-text="' '"
            :hour-text="' : '"
            :minute-text="' : '"
            :second-text="' '"
            :datatime="datatime"
          ></countDown>
        </div>
        <div class="seckillList">
          <div v-swiper:myScroll="swiperScroll">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide item"
                v-for="(item, index) in seckillList"
                :key="index"
              >
                <div
                  class="picTxt"
                  @click="goSeckillDetail(item.id, item.product_id, item.stop)"
                >
                  <div class="pictrue"><img :src="item.image" /></div>
                  <div class="name line1">{{ item.store_name }}</div>
                  <div class="money">
                    <span class="font-color">${{ item.price }}</span>
                    <span class="ot_price">${{ item.ot_price }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-button-prev" slot="pagination"></div>
            <div class="swiper-button-next" slot="pagination"></div>
          </div>
        </div>
      </div>
      <!-- <div @click="shop()">123456</div> -->
      <!--推荐分类-->
     <!-- <div class="" @click="classes()">
       分类
     </div> -->
     <!-- <div class="" @click="Recommending()">
       推荐商品
     </div> -->
     <!-- <div class="" @click="sellers()">
       热销商品
     </div> -->
      <div class="boutique" v-if="boutiqueTwo.length || boutiqueOne" id="page2">
        <div class="publicTitle acea-row row-between-wrapper">
          <div class="title acea-row row-middle">
            <div
              class="pictrue" style="width: 1000px;">
             <h1 style="
                font-size: 16px;
                font-weight: 700;
                color: #4d4d4d;
                letter-spacing: 1px;
                line-height: 30px;
                font-weight: 700;
              ">{{ $t("page.index.ShopbyCategory") }}</h1>
              <!-- <img src="../assets/images/boutiqueTitle.png" /> -->
            </div>
          </div>
          <nuxt-link
            :to="{ path: '/goods_cate', query: { type: 'best' } }"
            class="more acea-row row-center-wrapper"
          >
            {{ $t("page.index.orMore") }}<span class="iconfont icon-you"></span>
          </nuxt-link>
        </div>
        <div class="wrapper_1200" style="overflow: hidden; " @mouseenter="recommdss" @mouseleave="leavess">
          <div class="classificationOne" ref="classificationOne"  style="width: 2000px; display: flex;">
              <div
                class="classification"
                v-for="(item, index) in categoryList"
                :key="index"
                @click="classifications(item,index)"
                style="text-align: center; margin-top: 10px; margin-right: 18px"
              >
                <div
                  class="classificationImg"
                  style="border: 1px solid #eee; border-radius: 5px;
                   height: 64px;
                   width: 92px;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   "
                >
                  <img
                    :src="item.pic"
                    alt=""
                    style="width: 52px; height: 52px;"
                  />
                </div>

                <div
                  class="classificationText"
                  style="font-size: 12px; margin-top: 10px;
                  display: inline-block;
                  max-width: 90px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;"
                >
                  {{ item.cate_name }}
                </div>
              </div>


               <div
                 class="classification"
                 v-for="(item, index) in categoryList"
                 :key="index"
                 @click="classifications(item,index)"
                 style="text-align: center; margin-top: 10px; margin-right: 18px"
               >
                 <div
                   class="classificationImg"
                   style="border: 1px solid #eee; border-radius: 5px;
                    height: 64px;
                    width: 92px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    "
                 >
                   <img
                     :src="item.pic"
                     alt=""
                     style="width: 52px; height: 52px;"
                   />
                 </div>

                 <div
                   class="classificationText"
                   style="font-size: 12px; margin-top: 10px;
                   display: inline-block;
                   max-width: 90px;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   white-space: nowrap;"
                 >
                   {{ item.cate_name }}
                 </div>
               </div>



                <div
                  class="classification"
                  v-for="(item, index) in categoryList"
                  :key="index"
                  @click="classifications(item,index)"
                  style="text-align: center; margin-top: 10px; margin-right: 18px"
                >
                  <div
                    class="classificationImg"
                    style="border: 1px solid #eee; border-radius: 5px;
                     height: 64px;
                     width: 92px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     "
                  >
                    <img
                      :src="item.pic"
                      alt=""
                      style="width: 52px; height: 52px;"
                    />
                  </div>

                  <div
                    class="classificationText"
                    style="font-size: 12px; margin-top: 10px;
                    display: inline-block;
                    max-width: 90px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;"
                  >
                    {{ item.cate_name }}
                  </div>
                </div>



          </div>
        </div>
      </div>
      <!--每日新品上架-->
      <div class="newGoods" v-if="newGoods.length" id="page3">
        <div class="publicTitle acea-row row-between-wrapper">
          <div class="title acea-row row-middle">
            <div class="pictrue" style="width: 1000px;">
            <h1 style="
               font-size: 16px;
               font-weight: 700;
               color: #4d4d4d;
               letter-spacing: 1px;
               line-height: 30px;
               font-weight: 700;
             "> {{ $t("page.index.Daily") }}</h1>
            </div>
          </div>
          <!-- <nuxt-link
            :to="{ path: '/goods_list', query: { type: 'new' } }"
            class="more acea-row row-center-wrapper"
          >
            {{ $t("page.index.orMore") }}<span class="iconfont icon-you"></span>
          </nuxt-link> -->
        </div>
        <div class="list acea-row row-middle">
          <div
            class="item"
            v-for="(item, index) in productLaunch"
            :key="index"
            @click="goDetail(item)"
            style="border: 1px solid #eeeeee; border-radius: 5px;margin-left: 0px;"
          >
            <div class="pictrue">
              <img :src="item.image" v-if="item.image" />
              <img src="~assets/images/no_goods.jpg" alt="" v-else />
            </div>
            <div class="" style="margin-top: 5px">
              <span class="" style="color: #f99900; font-size: 15px"
                >${{ item.price }}</span
              >
            </div>
            <div style="margin-top: 5px">
              <span style="color: #999999; font-size: 13px">{{$t("page.index.Sold")  + item.sales}}</span>
            </div>
            <div class="name line1">{{ item.store_name }}</div>
            <div class="stock" style="margin-bottom: 25px;display: flex; justify-content: space-between;">
              <div>
                <i class="el-icon-shopping-cart-full" style="margin-right: 8px;font-weight: 600;color: #424542;"></i>
                <span style="color: #000; font-weight: 600;
                font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif!important;">
                {{ $t("page.index.PurchaseNow") }}
                </span>
              </div>
              <div>
                <i class="el-icon-star-off" style="font-size: 14px; color: #000;"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="business">
        <div style="text-align: center; margin-right: 100px; margin-top: 50px;">
          <p>{{$t("page.index.Become")}}</p>
          <p>{{$t("page.index.Total")}}</p>
          <h3>{{$t("page.index.Max")}}</h3>
          <div class="btn1" @click="btn">{{$t("page.index.Join")}}</div>
        </div>
      </div>


      <!-- 推荐产品 -->
      <div class="newGoods" v-if="newGoods.length" id="page3">
        <div class="publicTitle acea-row row-between-wrapper">
          <div class="title acea-row row-middle">
            <div class="pictrue" style="width: 1000px;">
            <h1 style="
               font-size: 16px;
               font-weight: 700;
               color: #4d4d4d;
               letter-spacing: 1px;
               line-height: 30px;
               font-weight: 700;
             ">{{$t("page.index.PopularItems")}}</h1>
            </div>
          </div>
        </div>
        <div class="list acea-row row-middle">
          <div
            class="item"
            v-for="(item, index) in singleRecommend"
            :key="index"
            @click="goDetail(item)"
            style="border: 1px solid #eeeeee; border-radius: 5px;margin-left: 0px;"
          >
            <div class="pictrue">
              <img :src="item.image" v-if="item.image" />
              <img src="~assets/images/no_goods.jpg" alt="" v-else />
            </div>
            <div class="" style="margin-top: 5px">
              <span class="" style="color: #f99900; font-size: 15px"
                >${{ item.price }}</span
              >
            </div>
            <div style="margin-top: 5px">
              <span style="color: #999999; font-size: 13px">{{$t("page.index.Sold")}}0</span>
            </div>
            <div class="name line1">{{ item.store_name }}</div>
            <div class="stock" style="margin-bottom: 25px;display: flex; justify-content: space-between;">
              <div>
                <i class="el-icon-shopping-cart-full" style="margin-right: 8px;font-weight: 600;color: #424542;"></i>
                <span style="color: #000; font-weight: 600;
                font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif!important;">
                {{ $t("page.index.PurchaseNow") }}
                </span>
              </div>
              <div>
                <i class="el-icon-star-off" style="font-size: 14px; color: #000;"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 推荐店铺 -->
      <div class="newGoods" v-if="newGoods.length" id="page3">
        <div class="publicTitle acea-row row-between-wrapper">
          <div class="title acea-row row-middle">
            <div class="pictrue" style="width: 1000px;">
            <h1 style="
               font-size: 16px;
               font-weight: 700;
               color: #4d4d4d;
               letter-spacing: 1px;
               line-height: 30px;
               font-weight: 700;
             ">{{$t("page.index.PopularStores")}}</h1>
            </div>
          </div>
        </div>
        <div class="list row-middle" style="overflow: hidden;" @mouseenter="recommd" @mouseleave="leavesss">
          <div class="RecommendedOnes" style="display: flex;">
             <div
               class="RecommendedStores"
               v-for="(item, index) in brandStoreList"
               :key="index"
               @click="goDetails(item)"
               style="
                 width: 340px;
                 border: 1px solid #eeeeee;
                 border-radius: 5px;
                 padding: 10px;
                 margin-right: 90px;
               "
             >
               <div style="display: flex">
                 <div>
                   <img
                     :src="
                       item.recommend && item.recommend.length
                         ? item.recommend[0].image
                         : item.mer_avatar
                     "
                     alt=""
                     style="width: 70px; height: 70px; border-radius: 50%"
                   />
                 </div>
                 <div style="margin-left: 15px">
                   <div style="width: 100px;text-overflow: ellipsis; white-space: nowrap;">
                      <p>{{ item.mer_name }}</p>
                   </div>
                   <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                    {{$t("page.index.Product") +  item.product_score}}
                   </p>
                   <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                     {{$t("page.index.TotalSales")}}0
                   </p>
                   <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                     {{$t("page.index.goodreviews") +  item.service_score}}
                   </p>
                 </div>
                 <div
                   style="
                     border: 1px solid #f89900;
                     backgroound-color: #fcf2e2;
                     width: 130px;
                     height: 26px;
                     line-height: 25px;
                     text-align: center;
                     border-radius: 13px;
                     margin-left: 20px;
                     margin-top: 50px;
                   "
                 >
                   <span style="color: #f89900; font-size: 13px"
                     >{{$t("page.index.VisitStore") +  ">" }}</span
                   >
                 </div>
               </div>
             </div>

             <div
               class="RecommendedStores"
               v-for="(item, index) in brandStoreList"
               :key="index"
               @click="goDetail(item)"
               style="
                 width: 340px;
                 border: 1px solid #eeeeee;
                 border-radius: 5px;
                 padding: 10px;
                 margin-right: 90px;
               "
             >
               <div style="display: flex">
                 <div>
                   <img
                     :src="
                       item.recommend && item.recommend.length
                         ? item.recommend[0].image
                         : item.mer_avatar
                     "
                     alt=""
                     style="width: 70px; height: 70px; border-radius: 50%"
                   />
                 </div>
                 <div style="margin-left: 15px">
                   <div style="width: 100px;text-overflow: ellipsis; white-space: nowrap;">
                      <p>{{ item.mer_name }}</p>
                   </div>
                   <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                    {{$t("page.index.Product") +  item.product_score}}
                   </p>
                   <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                     {{$t("page.index.TotalSales")}}0
                   </p>
                   <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                     {{$t("page.index.goodreviews") +  item.service_score}}
                   </p>
                 </div>
                 <div
                   style="
                     border: 1px solid #f89900;
                     backgroound-color: #fcf2e2;
                     width: 130px;
                     height: 26px;
                     line-height: 25px;
                     text-align: center;
                     border-radius: 13px;
                     margin-left: 20px;
                     margin-top: 50px;
                   "
                 >
                   <span style="color: #f89900; font-size: 13px"
                     >{{$t("page.index.VisitStore") +  ">" }}</span
                   >
                 </div>
               </div>
             </div>

          </div>
        </div>
      </div>
      <!-- 热销推荐 -->
      <div class="newGoods" v-if="newGoods.length" id="page3">
        <div class="publicTitle acea-row row-between-wrapper">
          <div class="title acea-row row-middle">
            <div class="pictrue" style="">
            <h1 style="
               font-size: 16px;
               font-weight: 700;
               color: #4d4d4d;
               letter-spacing: 1px;
               line-height: 30px;
               font-weight: 700;
             ">{{$t("page.index.HotDeals")}}</h1>
            </div>
          </div>
        </div>
        <div class="list acea-row row-middle">
          <div
            class="item"
            v-for="(item, index) in popularList"
            :key="index"
            @click="goDetail(item)"
            style="border: 1px solid #eeeeee; border-radius: 5px;margin-left: 0px;"
          >
            <div class="pictrue">
              <img :src="item.image" v-if="item.image" />
              <img src="~assets/images/no_goods.jpg" alt="" v-else />
            </div>
            <div class="" style="margin-top: 5px">
              <span class="" style="color: #f99900; font-size: 15px"
                >${{ item.price }}</span
              >
            </div>
            <div style="margin-top: 5px">
              <span style="color: #999999; font-size: 13px">{{$t("page.index.Sold")}}0</span>
            </div>
            <div class="name line1">{{ item.store_name }}</div>
            <div class="stock" style="margin-bottom: 25px;display: flex; justify-content: space-between;">
              <div>
                <i class="el-icon-shopping-cart-full" style="margin-right: 8px;font-weight: 600;color: #424542;"></i>
                <span style="color: #000; font-weight: 600;
                font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif!important;">
                {{ $t("page.index.PurchaseNow") }}
                </span>
              </div>
              <div>
                <i class="el-icon-star-off" style="font-size: 14px; color: #000;"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="merchants">
          <div class="download">
             <h3>{{$t("page.index.Cross")}}</h3>
             <div class="tips">
                <div class="">
                   {{$t("page.index.Brands")}}
                </div>
                /
                <div class="">
                   {{$t("page.index.discounts")}}
                </div>
             </div>
             <div class="btn-content">
                <div class="items">
                    <img src="../utils/img/ardr.png" alt="">
                    <a href="http://www.baidu.com" style="margin-left: 5px;">{{$t("page.index.Android")}}</a>
                </div>
                <div class="items"  style="margin-left: 20px;">
                     <img src="../utils/img/iphine.png" alt="">
                     <a href="http://www.baidu.com" style="margin-left: 5px;">{{$t("page.index.Apple")}}</a>
                </div>
             </div>
          </div>
      </div>


      <div class="">
        <div class="iconbottom" style="display: flex; justify-content: center;">
          <div>
            <img style="width: 60px; height: 60px;" src="../utils/img/aixin.png" alt="">
            <!-- <i class="iconfont icon-control-backward icon_span" style="font-size: 54px; color: #f89900;"></i> -->
            <span>{{$t("page.index.Original")}}</span>
          </div>
          <div>
            <img style="width: 60px; height: 60px;" src="../utils/img/zuo.png" alt="">
            <!-- <i class="iconfont icon-control-backward icon_span" style="font-size: 54px; color: #f89900;"></i> -->
            <span>{{$t("page.index.return")}}</span>
          </div>
          <div>
            <img style="width: 60px; height: 60px;" src="../utils/img/che.png" alt="">
            <!-- <i class="iconfont icon-control-backward icon_span" style="font-size: 54px; color: #f89900;"></i> -->
            <span>{{$t("page.index.Freightdiscount")}}</span>
          </div>
          <div>
            <img style="width: 60px; height: 60px;" src="../utils/img/qianbao.png" alt="">
            <!-- <i class="iconfont icon-control-backward icon_span" style="font-size: 54px; color: #f89900;"></i> -->
            <span>{{$t("page.index.SecurePayment")}}</span>
          </div>
        </div>
      </div>


      <!--推荐单品-->
      <!-- <div
        class="Recommended acea-row row-middle"
        v-if="singleRecommend.length"
        id="page5"
      >
        <div class="list">
          <div class="publicTitle acea-row row-between-wrapper">
            <div class="title acea-row row-middle">
              <div class="title-text">
                {{ $t("page.index.recommend")
                }}<span class="color-red">
                  {{ $t("page.index.singleproduct") }}</span
                >
              </div>
              <div class="title-intr">
                {{ $t("page.index.Featuredhotstyle") }}
              </div>
            </div>
            <nuxt-link
              :to="{ path: '/goods_list', query: { type: 'good' } }"
              class="moreBtn"
            >
              <span class="iconfont icon-you"></span>
            </nuxt-link>
          </div>
          <div class="recommended-items">
            <div v-swiper:mySwiper2="swiperOption2" class="swiper-container">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="(item, index) in singleRecommend"
                  :key="index"
                  v-if="index < 10"
                  @click="goDetail(item)"
                >
                  <img class="recommend-img" :src="item.image" />
                  <div class="recommend-text">
                    <div class="name line1">{{ item.store_name }}</div>
                    <div class="price">
                      $<span>{{ item.price }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="publicTitle acea-row row-between-wrapper">
            <div class="title acea-row row-middle">
              <div class="title-text">
                {{ $t("page.index.brand")
                }}<span class="color-red">
                  {{ $t("page.index.goodshop") }}</span
                >
              </div>
              <div class="title-intr">{{ $t("page.index.Goodquality") }}</div>
            </div>
            <nuxt-link :to="{ path: '/shop_street' }" class="moreBtn">
              <span class="iconfont icon-you"></span>
            </nuxt-link>
          </div>
          <div class="list_count">
            <nuxt-link
              :to="{ path: '/store', query: { id: item.mer_id } }"
              v-for="(item, index) in brandStoreList"
              :key="index"
              class="item acea-row row-between-wrapper"
            >
              <div class="list-product">
                <div class="name line2">{{ item.mer_name }}</div>
                <span v-if="item.is_trader" class="trader">{{
                  $t("page.store.selfSupport")
                }}</span>
                <div class="attention-count">
                  {{ item.care_count }}{{ $t("page.store.people") }}
                </div>
              </div>
              <div class="picture">
                <img
                  :src="
                    item.recommend && item.recommend.length
                      ? item.recommend[0].image
                      : item.mer_avatar
                  "
                  alt=""
                />
              </div>
            </nuxt-link>
          </div>
        </div>
        <div class="list">
          <div class="publicTitle acea-row row-between-wrapper">
            <div class="title acea-row row-middle">
              <div class="title-text">
                {{ $t("page.index.hot")
                }}<span class="color-red"> {{ $t("page.index.list") }}</span>
              </div>
              <div class="title-intr">
                {{ $t("page.index.Everyonehashelpedyouchoose") }}
              </div>
            </div>
            <nuxt-link
              :to="{ path: '/goods_list', query: { type: 'hot' } }"
              class="moreBtn"
            >
              <span class="iconfont icon-you"></span>
            </nuxt-link>
          </div>
          <div class="list_count">
            <div
              v-for="(item, index) in popularList"
              :key="index"
              @click="goDetail(item)"
              class="item hot-list acea-row row-between-wrapper"
            >
              <div class="top-num">
                <img
                  :src="'../assets/images/top-list' + index + '.png'"
                  alt=""
                />
              </div>
              <div class="picture">
                <img :src="item.image" alt="" />
              </div>
              <div class="name line2">{{ item.store_name }}</div>
            </div>
          </div>
        </div>
      </div> -->

      <!--分类-->
      <!-- <div v-if="classifyList.length" class="classify" id="page4">
        <div class="classify-title">
          <span>{{ $t("page.index.CategorySquare") }}</span>
        </div>
        <div class="list" v-for="(item, index) in classifyList" :key="index">
          <div class="list-title">
            {{ item.title }}
            <nuxt-link
              :to="{
                path: '/goods_cate',
                query: { sid: item.cid, name: item.title },
              }"
              class="more acea-row row-center-wrapper"
              style="float: right"
            >
              {{ $t("page.index.orMore")
              }}<span class="iconfont icon-you"></span>
            </nuxt-link>
          </div>
          <div class="list-count acea-row">
            <a class="classify-banner" @click="goUrl(item.left_link)">
              <img :src="item.left_image" alt="" />
            </a>
            <div class="classify-items acea-row">
              <div
                class="classify-item"
                v-for="(itemn, indexn) in item.list"
                :key="indexn"
                @click="goDetail(itemn)"
              >
                <div class="picture">
                  <img :src="itemn.image" alt="" />
                </div>
                <div class="item-text">
                  <div class="item-name line2">
                    <span
                      v-if="itemn.merchant.is_trader && itemn.product_type == 0"
                      class="trader"
                      >{{ $t("page.store.selfSupport") }}</span
                    ><span v-else-if="itemn.product_type == 1" class="trader">{{
                      $t("page.index.spike")
                    }}</span
                    >{{ itemn.store_name }}
                  </div>
                  <div class="item-price acea-row">
                    <div class="price"><span>$</span>{{ itemn.price }}</div>
                    <div v-if="itemn.issetCoupon" class="coupon">
                      {{ $t("page.index.coupons") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a class="list-banner" @click="goUrl(item.bottom_link)">
            <img :src="item.bottom_image" alt="" />
          </a>
        </div>
      </div> -->

      <!-- <div
        class="loadingicon acea-row row-center-wrapper"
        v-if="classifyList.length && classifyList.length >= limit"
      >
        <span class="loading iconfont icon-jiazai" v-if="!pullRefreshss"></span
        >{{ title }}
      </div> -->
      <!-- <div class="floatWindow">
        <div class="list">
          <div class="item" v-if="seckillList.length" @click="goSpecify(1)">
          <div>限时<br/>秒杀</div>
        </div>
        <div class="item" v-if="boutiqueTwo.length" @click="goSpecify(2)">
          <div>精品<br/>推荐</div>
        </div>
        <div class="item" v-if="newGoods.length" @click="goSpecify(3)">
          <div>火爆<br/>新品</div>
        </div>
        <div class="item" v-if="classifyList.length" @click="goSpecify(4)">
          <div>分类<br/>广场</div>
        </div>
          <div class="item" @mouseleave="wxCodeHide">
            <div @mouseenter="wxCode">
              <div class="iconfont icon-lianxikefu"></div>
              <div>{{$t('page.index.customerService')}}</div>
            </div>
            <div class="itemCon" v-if="isService">
              <div class="ewm acea-row row-center-wrapper">
                <div class="pictrue">
                  <div class="arrow"></div>
                  <div class="iconfont icon-dadianhua01"></div>
                </div>
                <div class="tip" @click="goUrl2($store.state.hotline)">{{$t('page.index.customerService')}}</div>
              </div>
            </div>
          </div>
           <div class="item" @click="goTop">
            <div class="iconfont icon-huidaodingbu1"></div>
            <div>{{ $t("page.index.top") }}</div>
          </div>
        </div>
      </div> -->
    </div>
    <!-- <div v-if="show == true">
      <div class="billLading" @click="ladingClick" v-if="ladingShow == false">
         <div style="font-size: 15px;color: #fff;margin-bottom: 10px;">
           <span>提单物品</span>
         </div>
      </div>
    </div> -->
    <div class="billLading1" @click="ladingClick1" v-if="ladingShow1 == false && show == true">
       <div style="font-size: 12px;color: #fff;margin-bottom: 10px;">
         <!-- <span>购物车</span> -->
         <div>
           <i class='el-icon-shopping-cart-full'></i>
           <span style="">{{cartCount + ' ' + $t('page.index.Item')}}</span>
         </div>
         <div class="btns">
           <span>${{countmoney}}</span>
         </div>
       </div>
    </div>
    <!-- <div class="Mask"></div> -->

    <div class="el-dialog__wrapper" v-if="ladingMidShow == true && show == true && ladingList.length>0" style="z-index: 999;background: rgba(0,0,0,.5);">
      <div style="background: #fff;position:relative;margin:auto;width:300px;height:360px;box-shadow: 0 1px 3px rgba(0,0,0,.3);top: 50%; transform: translateY(-180px);z-index: 9999;border-radius: 20px;padding:20px;">
        <div style="margin-top:30px;text-align: center;">
          <span style="font-size:20px;color:#f89900;">{{$t('page.goodsDetail.waitingorder')}}<br>{{$t('page.goodsDetail.processorder')}}</span>

          <img src="https://www.pacificshopmall.xyz/uploads/def/20231024/2a942f4b8c56e03dc656595e940ccd3a.jpg" alt="" style="width:100%;">
        </div>
        <div style="position:absolute;right:-20px;top:-20px;background: #ccc;width:20px;height:20px;line-height:20px;text-align: center;border-radius:10px;">
          <span @click="closeladingMid" class="el-dialog__close el-icon el-icon-close"></span>
        </div>
        <div style="position:absolute;left:15%;bottom:-20px;background: #f89900;width:70%;height:40px;line-height:40px;text-align: center;border-radius:40px;">
          <a href="/Merchantbackend" style="color:#fff;">{{$t('page.goodsDetail.Gotoprocessorder')}} ▶</a><!-- 跳转到商户后台订单提单位置 -->
        </div>
      </div>
    </div>
    <div class="flexbox" v-if="ladingShow == true">
        <div style="border-bottom: 1px solid #ccc; padding: 15px 0px;">
           <span style="margin-left: 45px; margin-bottom: 20px; font-size: 16px; font-weight: 600;">{{$t('page.index.car')}}</span>
           <span @click="close" style="float: right; margin-right: 30px;" class="el-dialog__close el-icon el-icon-close"></span>
        </div>
        <div class="" v-for="(item,index) in ladingList" :key="index">
           <div class="" style="border-bottom: 1px dashed #ccc;margin: 0 45px; padding: 15px 0px;">
             <div style="display: flex; align-items: center;">
                <div>
                  <img style="width: 100px; height: 100px;" :src='(item.orderProduct[0].cart_info.productAttr && item.orderProduct[0].cart_info.productAttr.image) || item.orderProduct[0].cart_info.product.image' alt="">
                </div>
                <div style="margin-left: 20px;">
                   <div v-if="types == undefined" style="width: 130px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
                   {{item.orderProduct[0].cart_info.product.store_name_en}}
                   </div>
                   <div v-if="types != undefined" style="width: 130px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
                   {{item.orderProduct[0].cart_info.product.store_name}}
                   </div>
                   <span style="display: block; margin-top: 10px;">{{$t('page.index.order') + '$' + item.orderProduct[0].cart_info.product.price}}</span>
                   <span style="display: block; margin-top: 10px;">{{ $t('page.index.lading') + '$' + item.real_mer_pay_money}}</span>
                   <span style="display: block; margin-top: 10px;">{{ $t('page.index.profit') + '$' + (Number(item.orderProduct[0].cart_info.product.price) - Number(item.real_mer_pay_money)).toFixed(2) }}</span>
                </div>
             </div>
             <div class="rest1" v-if="item.tidan == 2">{{$t('page.merchant.ytd')}}</div>
             <div class="rest"  v-else-if="item.tidan == 1" @click="goTd(item)">{{$t('page.merchant.td')}}</div>
             <!-- <div class="rest"  @click="goTd(item)">{{$t('page.merchant.td')}}</div> -->
           </div>
        </div>
    </div>
    <div class="flexbox" v-if="ladingShow1 == true">
        <div style="border-bottom: 1px solid #ccc; padding: 15px 15px;">
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <div style="display: flex; align-items: center;">
              <i style="font-size: 24px; margin-right: 16px; color: #f89900;" class='el-icon-shopping-cart-full'></i>
              <div style="">
                <h3 style="font-size: 14px; font-weight: 500;"> {{cartCount + ' ' + $t('page.index.Item')}}</h3>
                <p style="font-size: 12px;font-weight: 400;color: #333;margin-top: 4px;">{{$t('page.goodsDetail.cart')}}</p>
              </div>
            </div>
            <div>
              <span @click="close1" style="float: right; font-size: 17px; margin-right: 10px;" class="el-dialog__close el-icon el-icon-close"></span>
            </div>
          </div>
        </div>
        <!-- <div style="border-bottom: 1px solid #ccc; padding: 15px 0px;">
           <span style="padding-left: 45file:///C:/Users/huojunfei/Documents/WeChat Files/wxid_2smdlac4qqja22/FileStorage/File/2023-12/index.vuefloat: right; margin-right: 30px;" class="el-dialog__close el-icon el-icon-close"></span>
        </div> -->
        <div class="shoppingCart">
          <div class="">
            <!-- <div class="title">
              <nuxt-link class="home" to="/">{{$t('page.goodsDetail.home')}} ></nuxt-link>
              {{$t('page.goodsDetail.cart')}}
             </div> -->
             <div v-if="cartValid.length == 0">
                <div style="margin-top: 150px; height: 100%; display: flex; justify-content: center; align-items: center;">
                  <img style="width: 320px; height: 337px;" src="../utils/img/img.png" alt="">
                </div>
                <div style="margin-top: 20px; text-align: center;font-size: 26px;">{{$t('page.index.shopping')}}</div>
                <div style="width: 25%; margin: auto;">
                   <div @click="close1" style="border: 1px solid #f89900;

                               text-align: center;
                   border-radius: 4px;
                   padding: 15px 30px;
                   font-size: 17px;
                   color: #f89900;
                   font-weight: 500;
                   margin: 30px auto 10px;
                   cursor: pointer;">
                                 {{$t('page.index.Start')}}
                               </div>
                </div>
             </div>

            <div class="cartList" v-if="cartValid.length">
              <!-- <div class="header acea-row row-middle">
                <div class="allSelect acea-row row-center-wrapper" @click="allChecked">
                  <div class="checkbox-wrapper">
                    <label class="well-check">
                      <input
                        type="checkbox"
                        name=""
                        value=""
                        :checked="isAllSelect"
                        @click="allChecked"
                      />
                      <i class="icon"></i>
                      <span class="checkAll">{{$t('page.goodsAddcart.selectAll')}}</span>
                    </label>
                  </div>
                </div>
                <div class="info acea-row row-center-wrapper"> {{$t('page.goodsAddcart.info')}}</div>
                <div class="price acea-row row-center-wrapper">{{$t('page.goodsList.price')}}</div>
                <div class="num acea-row row-center-wrapper">{{$t('page.goodsDetail.num')}}</div>
                <div class="money acea-row row-center-wrapper"> {{$t('page.orderPayStatus.payPrice')}}</div>
                <div class="operate acea-row row-center-wrapper">{{$t('page.goodsAddcart.fonctionner')}}</div>
              </div> -->
              <div class="body">
                <div v-for="(item, index) in cartValid" :key="index">
                  <!-- <div class="store-info acea-row">
                    <div class="storeAllSelect">
                      <div class="checkbox-wrapper">
                        <label class="well-check">
                          <input
                            type="checkbox"
                            name=""
                            value=""
                            :checked="item.checked"
                            @click="storeChecked(item,index)"
                          />
                          <i class="icon"></i>
                          <span class="checkAll">{{ item.mer_name }}</span>
                          <span class="trader" v-if="item.is_trader">{{$t('page.store.selfSupport')}}</span>
                        </label>
                      </div>
                    </div>
                  </div> -->
                  <div class="storeCartList">
                    <div style="" class="item acea-row row-middle" v-for="(itemn, indexn) in item.list" :key="indexn">
                      <div class="acea-row row-center-wrapper">
                        <div  class="checkbox-wrapper">
                          <label class="well-check">
                            <input
                              type="checkbox"
                              name=""
                              value=""
                              :checked="itemn.checked"
                              @click="switchSelect(index,indexn)"
                            />
                            <i class="icon"></i>
                          </label>
                        </div>
                      </div>
                      <div class="info acea-row">
                        <div class="pictrue">
                          <img style="width: 80px; height: 80px;" v-if="itemn.productAttr && itemn.productAttr.image" :src='itemn.productAttr.image'>
                          <img style="width: 80px; height: 80px;" v-else :src='itemn.product.image'>
                        </div>
                        <div class="text">
                          <div style="max-width: 170px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 400;font-size: 12px;color: #f89900;
                              margin-bottom: 10px;" class="name">{{itemn.product['store_name_'+lang] ?itemn.product['store_name_'+lang] : itemn.product.store_name }}</div>
                          <!-- <div class="infor" v-if="itemn.productAttr">{{$t('page.goodsAddcart.attribute')}}：{{ itemn.productAttr.sku || "" }}</div> -->
                          <div style="color: var(--color-price);font-size: 13px;font-weight: 400;flex: 1;overflow-x: hidden;
    text-overflow: ellipsis;margin-top: 10px;" class="money acea-row font-color" v-if="itemn.productAttr">
                            ${{ itemn.productAttr.price ? itemn.productAttr.price * itemn.cart_num : "" }}
                          </div>
                          <div style="margin-top: 5px; align-items: center;" class="num acea-row">
                            <div class="iconfont icon-shangpinshuliang-jian" :class="itemn.numSub?'grey':''"
                                 @click.prevent="reduce(itemn)"></div>
                            <!--<div class="numCon">{{item.cart_num}}</div>-->
                            <input style="font-size:13px;" class="numCon" v-model="itemn.cart_num" @input="inputNum(itemn)"/>
                            <button :disabled="itemn.numAdd" class="iconfont icon-shangpinshuliang-jia"
                                    :class="itemn.numAdd ?'grey':''" @click.prevent="plus(itemn)"></button>
                          </div>
                        </div>
                      </div>
                      <!-- <div class="price acea-row row-center-wrapper" v-if="itemn.productAttr">${{ itemn.productAttr.price || "" }}</div> -->
                      <!-- <div class="num acea-row row-center-wrapper">
                        <div class="iconfont icon-shangpinshuliang-jian" :class="itemn.numSub?'grey':''"
                             @click.prevent="reduce(itemn)"></div>
                        <div class="numCon">{{item.cart_num}}</div>
                        <input class="numCon" v-model="itemn.cart_num" @input="inputNum(itemn)"/>
                        <button :disabled="itemn.numAdd" class="iconfont icon-shangpinshuliang-jia"
                                :class="itemn.numAdd ?'grey':''" @click.prevent="plus(itemn)"></button>
                      </div> -->
                      <!-- <div class="money acea-row row-center-wrapper font-color">${{comsys.Mul(item.truePrice,item.cart_num)}}</div> -->
                      <!-- <div class="money acea-row row-center-wrapper font-color" v-if="itemn.productAttr">
                        ${{ itemn.productAttr.price ? itemn.productAttr.price * itemn.cart_num : "" }}
                      </div> -->
                      <div class="operate acea-row row-center-wrapper" @click="delgoods(itemn)"><span
                        class="iconfont icon-shanchu"></span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="cartList invalid" v-if="cartInvalid.length">
              <div class="body">
                <div class="item acea-row row-middle" v-for="(item, index) in cartInvalid" :key="index">
                  <div class="allSelect acea-row row-center-wrapper">
                    <div class="checkbox-wrapper">
                      <label class="well-check" style="color: #d2d2d2;">
                        {{$t('page.goodsAddcart.failureGoods')}}
                      </label>
                    </div>
                  </div>
                  <div class="info acea-row row-center-wrapper">
                    <div class="pictrue">
                      <img :src="item.productAttr.image" v-if="item.productAttr">
                      <img :src="item.product.image" v-else>
                    </div>
                    <div class="text">
                      <div class="name line2 grey">{{ item.product['store_name_'+lang] ?item.product['store_name_'+lang] : item.product.store_name }}</div>
                      <div class="infor" v-if="item.productAttr">{{$t('page.goodsAddcart.attribute')}}：{{ item.productAttr.sku }}</div>
                    </div>
                  </div>
                  <div class="price acea-row row-center-wrapper grey">${{ item.product.price }}</div>
                  <div class="num acea-row row-center-wrapper">
                    <div class="iconfont icon-shangpinshuliang-jian grey"></div>
                    <div class="numCon grey">{{ item.cart_num }}</div>
                    <div class="iconfont icon-shangpinshuliang-jia grey"></div>
                  </div>
                  <div class="money acea-row row-center-wrapper font-color grey" >
                    ${{ item.product.price * item.cart_num }}
                  </div>
                  <div class="operate acea-row row-center-wrapper" @click="delgoods(item)"><span
                    class="iconfont icon-shanchu"></span></div>
                </div>
              </div>
            </div> -->
            <div class="footer" v-if="cartValid.length || cartInvalid.length">

              <!-- <div class="num">
                <div class="allSelect" @click="allChecked">
                  <div class="checkbox-wrapper">
                    <label class="well-check">
                      <input
                        type="checkbox"
                        name=""
                        value=""
                        :checked="isAllSelect"
                        @click="allChecked"
                      />
                      <i class="icon"></i>
                      <span v-if="types == 'two'" class="checkAll">{{$t('page.goodsAddcart.selectAll')}}</span>
                      <span v-if="types !== 'two'" style="display: block; overflow: hidden;text-overflow: ellipsis;word-break: break-all;width: 50px;white-space: nowrap;" class="checkAll">{{$t('page.goodsAddcart.selectAll')}}</span>
                    </label>
                  </div>
                </div>
                </div> -->
                  <!-- <div id="" :style="types == 'two'?'':'width: 90px; display: flex; margin-left: 20px;'">
                  <span v-if="types == 'two'">{{$t('page.goodsDetail.choose')}}</span>
                  <span v-if="types !== 'two'" style="display: block; overflow: hidden;text-overflow: ellipsis;word-break: break-all;width: 50px;white-space: nowrap;">{{$t('page.goodsDetail.choose')}}</span>
                  <span>{{ cartCount }}</span>
                  <span v-if="types == 'two'">{{$t('page.orderDetails.item')}}</span>
                  <span v-if="types !== 'two'" style="display: block; overflow: hidden;text-overflow: ellipsis;word-break: break-all;width: 50px;white-space: nowrap;">{{$t('page.orderDetails.item')}}</span>
                  </div> -->
                  <!-- <div class="total" style="margin-left: 10px;">{{$t('page.users.orderConfirm.total')}}：<span class="font-color">${{ countmoney }}</span></div> -->
              <div style="display: flex; align-items: center;" class="">
                <!-- <div class="total">{{$t('page.users.orderConfirm.total')}}：<span class="font-color">${{ countmoney }}</span></div> -->
                <div :style="cartValid.length == 0?'margin-top:50px':'margin-top:20px'" style="width: 450px;height: 55px; line-height: 55px; font-weight: 700;
                font-size: 18px;color: #fff;background-color: #f89900;border-color: #f89900;" class="bnt bg-color" @click="subOrder">{{$t('page.goodsDetail.settle')}} <span style="font-size: 18px; font-weight: 700;">${{countmoney}}</span></div>
              </div>
            </div>
            <!-- <div class="noCart" v-if="!cartValid.length && !cartInvalid.length">
              <div class="pictrue"><img src="../assets/images/noCart1.png"></div>
              <div class="tip">{{$t('page.index.empty')}} </div>
              <nuxt-link to="/" class="goIndex">{{$t('page.index.continueshopping')}}</nuxt-link>
            </div> -->
          </div>
        </div>

    </div>
    <el-dialog
      title="payPassword"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input v-model="palyPwd" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handtohuo">OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import countDown from "@/components/countDown";
import ChatItem from "@/components/chat";
import $ from 'jquery'
var timer
var timer1
const CHECKED_IDS = "cart_checked";
export default {
  name: "index",
  auth: false,
  components: {
    countDown,
    ChatItem
  },
  data () {
    return {
      ladingMidShow: false,
      cartValid: [],
      cartInvalid: [],
      isAllSelect: false,
      countmoney: 0,//购物车产品总价；
      cartNum: 0,
      cartCount: '',
      lang:'',
      jiajian:1,
      userUid:0,
      dialogVisible:false,
       chatVisible:false,
      tdOrderInfo:'',
      ladingShow: false,
      ladingShow1:false,
      isflex:false, //是否开启吸顶模式
      seen: false,
      current: -1,
      swiperData: [],
      headerList: [],
      categoryList: [],
      categoryCurrent: null,
      datatime: 0,
      currentTime: "00:00",
      seckillList: [],
      recommendList: [],
      boutiqueOne: {},
      boutiqueTwo: [],
      newGoods: [],
      classifyList: [], //初始数据代码
      brandStoreList: [], //品牌好店
      popularList: [],
      show:false,
      types:'',
      swiperData1:[
        {image:require('@/utils/img/banberOne.png') },
        {image:require('@/utils/img/banberones.png') },
      ],
      swiperData2:[
        {image:require('@/utils/img/bannertwo.png') },
        {image:require('@/utils/img/bannertwos.png') },
      ],
      swiperData3:[
        {image:require('@/utils/img/bannerThree.png') },
        {image:require('@/utils/img/bannerThrees.png') },
      ],
      growth:430,
      left:0,
      width:0,
      growth1:110,
      left1:0,
      width1:0,
      pullRefreshss: true,
      page: 1, //代表页面的初始页数
      limit: 3,
      scollY: null, // 离底部距离有多少
      pageTotal: 0, //总页数
      title: this.$t('page.index.Loading'),
      swiperOption: {
        pagination: {
          el: ".paginationBanner",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 5000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperScroll: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      swiperOption2: {
        autoplay: {
          disableOnInteraction: false,
          delay: 9000
        },
        loop: true,
        speed: 2000,
        observer: true,
        slidesPerView: 'auto',
        observeParents: true,
        centeredSlides: true
      },
      swiperOption1: {
        autoplay: {
          disableOnInteraction: false,
          delay: 5000
        },
        loop: true,
        speed: 500,
        observer: true,
        slidesPerView: 'auto',
        observeParents: true,
        centeredSlides: true
      },
      swiperOption3: {
        autoplay: {
          disableOnInteraction: false,
          delay: 7000
        },
        loop: true,
        speed: 500,
        observer: true,
        slidesPerView: 'auto',
        observeParents: true,
        centeredSlides: true
      },
      isService: false,
      userInfo:{},
      searchVal: '',
      search: '',
      palyPwd:'',
      ladingList:[],
    };
  },

  async asyncData ({
    app,
    error
  }) {
    try {
      let [categoryMsg, seckillMsg,productLaunch,boutiqueTwo, newGoods,singleRecommend, brandStoreList, popularList, homeList,
        seckillList, classifyList
      ] = await Promise.all([
        app.$axios.get("/api/store/product/category/lst"),
        app.$axios.get("/api/store/product/seckill/select"),
        app.$axios.get("/api/product/spu/recommend", {
          params: {
            page: 1,
            limit: 18,
            common: 1,
          }
        }),
        app.$axios.get("/api/product/spu/hot/best", {
          params: {
            page: 1,
            limit: 1,
            common: 1,
          }
        }),
        app.$axios.get("/api/product/spu/hot/good", {
          params: {
            page: 1,
            limit: 2,
            common: 1
          }
        }),
        app.$axios.get("/api/product/spu/hot/new", { //新
          params: {
            page: 1,
            limit: 12,
            common: 1,
          }
        }),
        app.$axios.get("/api/store/merchant/lst", {
          params: {
            page: 1,
            limit: 10,
            is_best: 1
          }
        }),
        app.$axios.get("/api/product/spu/hot/hot", {    //222
          params: {
            page: 1,
            limit: 18,
            common: 1
          }
        }),
        app.$axios.get("/api/pc/home"),
        app.$axios.get("/api/store/product/seckill/lst", {
          params: {
            page: 1,
            limit: 5
          }
        }),
        app.$axios.get("/api/pc/rec_list", {
          params: {
            page: 1,
            limit: 6
          }
        }),
      ]);
      return {
        categoryList: categoryMsg.data.list,
        seckillTime: seckillMsg.data,
        productLaunch: productLaunch.data.list,
        boutiqueOne: boutiqueTwo.data.list.length ? boutiqueTwo.data.list.shift() : {},
        newGoods: newGoods.data.list,
        singleRecommend: singleRecommend.data.list,
        boutiqueTwo: boutiqueTwo.data.list,
        brandStoreList: brandStoreList.data.list,
        popularList: popularList.data.list,
        swiperData: homeList.data.pc_home_banner,
        headerList: homeList.data.pc_home_tab,
        seckillList: seckillList.data.list,
        classifyList: classifyList.data.list,
        pageTotal: classifyList.data.count,
      };
    } catch (e) {
      error({
        statusCode: 500,
        msg: typeof e === 'string' ? e : this.$t('page.index.busy')
      });
    }
  },
  fetch ({
    store
  }) {
    store.commit("isBanner", true);
    store.commit("isHeader", true);
    store.commit("isFooter", true);

  },
  head () {
    return {
      title: this.$store.state.titleCon
    }
  },
  beforeMount () {
    this.classifyList = this.parseLst(this.classifyList);
   this.anims()
   this.banner()
   this.Recom()
  },
  mounted () {
    //console.log('userInfo',this.userInfo)
    if (this.seckillTime && this.seckillList.length > 0) this.getSeckillIndexTime();
    this.pullRefresh();
    this.getUserInfo()
    this.getCartList()
    this.ladingMidShow = true
    this.lang = this.$cookies.get('locale') || 'en';
    if(this.lang === "zh-Hant"){
      this.lang = 'tw'
    }
    this.types = this.$cookies.get("type");
    const  params = {
            page: 1,
            limit: 18,
            common: 1
          }
          this.$axios.get("/api/user/member/orderdfh").then(res=>{
            this.ladingList = res.data.list
            //console.log('this.ladingList',this.ladingList)
          })
  },
  beforeDestroy () {
    window.onscroll = null;
  },
  computed:{

  },
  methods: {
    shop(){
      this.$router.push({
        path: '/shopping_cart',
      });
    },
    inputNum(item) {
      let that = this;
      item.cart_num = parseInt(item.cart_num) >= item.trueStock ? item.trueStock : item.cart_num;
      item.cart_num = parseInt(item.cart_num) <= 1 || isNaN(parseInt(item.cart_num)) ? 1 : item.cart_num;
      that.countMoney();
      let conNum = 0;
      that.cartValid.forEach(item => {
        item.list.forEach(i => {
            conNum += parseInt(i.cart_num)
        });
      });
      that.cartInvalid.forEach(item => {
        item.list.forEach(i => {
          conNum += parseInt(i.cart_num)
        });
      });
      that.$store.commit('cartNum', conNum);
      that.syncCartNum(item);
    },
    //立即下单；
    subOrder: function () {
      let that = this,
        list = that.cartValid,
        id = [];
      list.forEach(function (val) {
        val.list.forEach(function (val) {
          if (val.checked === true) {
            id.push(val.cart_id);
          }
        })
      });
      if (id.length === 0) {
        that.$message.error(this.$t('page.index.pleaseselectaproduct'));
        return;
      }
      this.$router.push({path: '/order_confirm?cartId=' + id.join(',')});
    },
    //删除商品；
    delgoods: function (item) {
      let that = this;
      let checkedIds = that.$cookies.get(CHECKED_IDS) || [];
      let index = checkedIds.indexOf(item.id);
      if(index>-1){
        checkedIds.splice(index, 1);
      }
      that.$axios.post('/api/user/cart/delete', {cart_id: [item.cart_id.toString()]}).then(res => {
        that.$message.success(this.$t('message.login.delSU'));
        that.gainCount();
        that.getCartList();
        that.countMoney();
      })
    },
    gainCount: function() {
      let that = this;
      that.$axios.get('/api/user/cart/count').then(res=>{
        that.$store.commit('cartNum', res.data[0].count || 0);
      });
    },
    getCartList() {
      let that = this;
      that.$axios.get('/api/user/cart/lst').then(res => {
        that.cartValid = res.data.list;
        that.cartInvalid = res.data.fail;
        let checked = this.$cookies.get(CHECKED_IDS) || [];
        that.cartValid.forEach(cart => {
          cart.list.forEach(cartItem => {
            if (checked.length) {
              cartItem.checked = checked.indexOf(cartItem.cart_id) > -1;
            } else {
              cartItem.checked = true;
            }
            if (cartItem.cart_num == 1) {
              cartItem.numSub = true;
            } else {
              cartItem.numSub = false;
            }
            if (cartItem.cart_num == cartItem.productAttr.stock) {
              cartItem.numAdd = true;
            } else {
              cartItem.numAdd = false;
            }
          })
        });
        that.storeAllChceked();
        that.countMoney();
      })
    },
    //加
    plus: function (goods, index) {
      let that = this;
      goods.cart_num++;
      if (goods.hasOwnProperty('productAttr') && goods.cart_num > goods.productAttr.stock) {
        goods.cart_num = goods.productAttr.stock;
        goods.numAdd = true;
        goods.numSub = false;
        return
      } else {
        goods.numAdd = false;
        goods.numSub = false;
      }
      that.$store.commit('cartNum', that.$store.state.cartnumber + 1);
      that.countMoney();
      that.syncCartNum(goods);
    },
    //减
    reduce: function (goods) {
      let that = this;
      let status = false;
      if (goods.cart_num <= 1) {
        goods.cart_num = 1;
        goods.numSub = true;
        status = true;
      } else {
        goods.cart_num = Number(goods.cart_num) - 1
        this.cartTotalCount = Number(that.cartTotalCount) - 1;
        goods.numSub = false;
        goods.numAdd = false;
        that.$store.commit('cartNum', that.$store.state.cartnumber - 1);
        if (goods.cart_num <= 1) {
          goods.numSub = true;
        }
      }
      that.countMoney();
      that.syncCartNum(goods);
    },
    syncCartNum(cart) {
      if (!cart.sync)
        cart.sync = window.debounce(() => {
          this.$axios.post('/api/user/cart/change/' + cart.cart_id, {
            cart_num: Math.max(cart.cart_num, 1) || 1
          }).then(res => {
          }).catch(err =>{
            cart.cart_num--;
            this.$store.commit('cartNum', this.$store.state.cartnumber - 1);
            this.$message.error(err);
          })
        }, 500);
      cart.sync();
    },
    //单选
    switchSelect: function (index, indexn) {
      let that = this,
        cart = that.cartValid[index]['list'][indexn];
      cart.checked = !cart.checked;

      let len = 0;
      let selectnum = [];
      for (let j = 0; j < that.cartValid.length; j++) {
        for (let k = 0; k < that.cartValid[j]['list'].length; k++) {
          len++;
          if (that.cartValid[j]['list'][k].checked === true) {
            selectnum.push(true);
          }
        }
      }
      that.isAllSelect = selectnum.length === len;
      that.$set(that, "cartValid", that.cartValid);
      that.storeAllChceked();
      that.$set(that, "isAllSelect", that.isAllSelect);
      that.countMoney();
    },
    /**判断单个店铺是不是全选 */
    storeAllChceked: function () {
      let selectnum, selectAllnum = [], checknum = 0;
      let that = this;
      for (let j = 0; j < that.cartValid.length; j++) {
        selectnum = [];
        for (let k = 0; k < that.cartValid[j]['list'].length; k++) {
          checknum++;
          if (that.cartValid[j]['list'][k].checked) {
            selectnum.push(true);
            selectAllnum.push(true);
          } else {
            selectnum.length - 1;
            selectAllnum.length - 1;
          }
          that.cartValid[j]['checked'] = selectnum.length === that.cartValid[j]['list'].length;
          that.isAllSelect = selectAllnum.length === checknum;
          that.$set(that, "cartValid", that.cartValid);
        }
      }
    },
    //单个店铺商品全选
    storeChecked: function (item, index) {
      let that = this;
      item.checked = !item.checked;
      that.cartValid[index]['list'].forEach(cart => {
        cart.checked = item.checked;
      });
      that.$set(that, "cartValid", that.cartValid);
      that.storeAllChceked();
      that.countMoney();
    },
    //全选
    allChecked: function () {
      let that = this;
      let selectAllStatus = that.isAllSelect;
      selectAllStatus = !selectAllStatus;
      that.cartValid.forEach(cart => {
        cart.checked = selectAllStatus;
        cart.list.forEach(cartItem => {
          cartItem.checked = selectAllStatus;
        });
      });
      that.$set(that, "cartValid", that.cartValid);
      that.$set(that, "isAllSelect", selectAllStatus);
      that.countMoney();
    },
    //总共价钱；
    countMoney: function () {
      let that = this;
      let carmoney = 0, totalNum = 0;
      let array = that.cartValid;
      for (let i = 0; i < array.length; i++) {
        for (let j = 0; j < array[i]['list'].length; j++) {
          if (array[i]['list'][j].checked === true) {
            carmoney = this.comsys.Add(carmoney, this.comsys.Mul(array[i]['list'][j].cart_num, array[i]['list'][j]['productAttr']['price']));
            totalNum += array[i]['list'][j].cart_num
          }
        }
      }
      this.cartCount = totalNum
      that.countmoney = carmoney;
      this.countNum();
    },
    countNum() {
      let num = 0;
      let checkedList = []
      this.cartValid.forEach(item => {
        item.list.forEach(cart => {
          if (cart.checked) {
            checkedList.push(cart.cart_id);
            num++;
          }
        })
      })
      setTimeout(() => {
        this.$cookies.set(CHECKED_IDS, checkedList);
      }, 300);
      this.cartNum = num;
    },
    jia() { this.jiajian++; },
    jian() {
      this.jiajian==1?1:this.jiajian--;//jiajian应该是读出来的数据
    },
    handtohuo() {
      const params= {
        order_id:this.tdOrderInfo.order_id,
        withdraw_pwd:this.palyPwd,
        txt:this.$t('page.merchant.deduction')
      }
      // console.log('params',params)
      this.$axios.post("/api/user/member/goodslist_tidan",{...params}).then(res=>{
        this.getList();
        this.dialogVisible = false
      }).catch(err=>{
        this.$message.error(err)
      })

    },
    handleClose(){
        this.checkedBrands = [];
        this.searchVal = this.search = "";
    },
     getUserInfo() {
      this.$axios.get("/api/user").then(res=>{
        this.userInfo = res.data;
        this.show = true
        //console.log('this.userInfo',this.userInfo)
      })
    },
    goTd(info) {
      console.log('info',info)
      if (this.userInfo.now_money < info.real_mer_pay_money) {
        this.$message.error(this.$t("page.index.insufficientbalance"))
        return;
      }
      this.tdOrderInfo = info
      this.dialogVisible = true
      // this.chatVisible = true
    },
    ladingClick(){
      this.ladingShow = true
      this.ladingMidShow = true
    },
    ladingClick1(){
      this.ladingShow1 = true
    },
    close(){
      this.ladingShow = false
    },
    close1(){
      this.ladingShow1 = false
    },
    btn(){
      this.$router.push({
        path: '/merchant_settled',
      });
    },
    banner(){
      var growth = 241
      var left = 0
      var width = 0
      setInterval(function(){
        if(left == 0){
          $('.bannerImg').addClass('transition')
        }
        left = left + growth
        $('.bannerImg').css('margin-left','-'+left + 'px')
        width = $('.bannerImg').css('margin-left')
        if(width == '-241px'){
         $('.bannerImg').removeClass('transition')
         $('.bannerImg').css('margin-left','0px')
         left = 0
        }
      },3000)
    },
    anims(){
      let that = this
      // var growth = 110
      // var left = 0
      // var width = 0
      timer1 = setInterval(function(){
        if(that.left1 == 0){
          $('.classificationOne').addClass('transition')
        }
        that.left1 = that.left1 + that.growth1
        $('.classificationOne').css('margin-left','-'+that.left1 + 'px')
        that.width1 = $('.classificationOne').css('margin-left')
        // console.log('that.width1',that.width1)
        if(that.width1 == '-880px'){
         $('.classificationOne').removeClass('transition')
         $('.classificationOne').css('margin-left','0px')
         that.left1 = 0
        }
      },8000)
    },
    Recom(){
      let that = this
      // var growth = 430
      // var left = 0
      // var width = 0
     timer = setInterval(function(){
        if(that.left == 0){
          $('.RecommendedOnes').addClass('transition')
        }
        that.left = that.left + that.growth
        $('.RecommendedOnes').css('margin-left','-'+that.left + 'px')
        that.width = $('.RecommendedOnes').css('margin-left')
        if(that.width == '-4300px'){
         $('.RecommendedOnes').removeClass('transition')
         $('.RecommendedOnes').css('margin-left','0px')
         that.left = 0
        }
      },8000)
    },
    recommd(){
      let that = this
      clearInterval(timer);
    },
    leavesss(){
      this.Recom()
    },
    recommdss(){
      let that = this
      clearInterval(timer1);
    },
    leavess(){
      this.anims()
    },
    parseLst (lst) {
      return lst.map(item => {
        if (item.left_image) {
          item.list = item.list.splice(0, 8);
        }
        return item;
      });
    },
    goSpecify (key) {
      var PageId = document.querySelector('#page' + key)
      window.scrollTo({
        'top': PageId.offsetTop,
        'behavior': 'smooth'
      })
    },
    classes(){
      this.$router.push({
        path: '/classification',
      });
    },
    Recommending(){
      this.$router.push({
        path: '/Commodities',
      });
    },
    sellers(){
      this.$router.push({
        path: '/bestSellers',
      });
    },
    closeladingMid(){
      this.ladingMidShow = false
    },
    classifications(item,index){
      console.log('item',item)
      this.$router.push({
        path: '/goods_cate',
        query: {
          sid: item.store_category_id,
          name: item.cate_name,
          index:index,
        }
      });
    },
    goCate (categoryCurrent, item, itemn) {
      let name = '';
      if (categoryCurrent && item) {
        name = categoryCurrent.cate_name + '_' + categoryCurrent.store_category_id + ',' + item.cate_name + '_' + item
          .store_category_id + ',' + itemn.cate_name + '_' + itemn.store_category_id
      } else {
        if (item) {
          name = item.cate_name + '_' + item.store_category_id + ',' + itemn.cate_name + '_' + itemn.store_category_id
        } else {
          name = itemn.cate_name + '_' + itemn.store_category_id
        }
      }

      this.$router.push({
        path: '/goods_cate',
        query: {
          sid: itemn.store_category_id,
          name: encodeURI(name)
        }
      });
    },
    /*点击轮播图跳转*/
    goUrl (url) {
      if (!url) return;
      let isHttp = url.substring(0, 4) == 'http' ? true : false;
      if (isHttp) {
        location.href = url;
      } else {
        this.$router.push({
          path: url
        });
      }
    },
    goUrl2 (url) {
      if (!url) return;
      window.open(url);
    },
    getSeckillIndexTime () {
      let seckillTime = this.seckillTime;
      this.datatime = seckillTime.seckillEndTime;
      this.currentTime =
        seckillTime.seckillTime[seckillTime.seckillTimeIndex].start_time;
      let id = seckillTime.seckillTime[seckillTime.seckillTimeIndex].seckill_time_id;
    },
    enter (index) {
      this.seen = true;
      this.current = index;
      this.categoryCurrent = this.categoryList[index];
    },
    leave () {
      this.seen = false;
      this.current = -1;
    },
    goTop () {
      (function n () {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > 0) {
          window.requestAnimationFrame(n);
          window.scrollTo(0, t - t / 5)
        }
      })()
    },
    wxCode () {
      this.isService = true
    },
    wxCodeHide () {
      this.isService = false
    },
    getClassifyList () {
      let _this = this,
        currentPage = {
          page: this.page,
          limit: this.limit
        };
      _this.$axios
        .get("/api/pc/rec_list", {
          params: currentPage
        })
        .then(function (res) {
          _this.pageTotal = res.data.count;
          // 请求完成后，把得到的数据拼接到当前dom里面
          _this.classifyList = _this.classifyList.concat(_this.parseLst(res.data.list));
        })
        .catch(function (err) {
          _this.$message.error(err);
        });
    },
    // 下拉加载ajax
    pullRefresh: function () {
      let _this = this;
      window.onscroll = function () {
        _this.scrollChange();
      };
    },
    scrollChange: function () {
      var _this = this;
      this.scollY =
        this.comsys.getScrollTop() +
        this.comsys.getWindowHeight() -
        this.comsys.getScrollHeight();
      // 把下拉刷新置为false，防止多次请求
      if (this.scollY >= -50) {
        if (this.page > Math.ceil(this.pageTotal / this.limit)) {
          this.title = this.$t('page.index.Nomoredata');
          this.pullRefreshss = true;
          return false;
        }
        if (!this.pullRefreshss) {
          return false;
        }
        _this.pullRefreshss = false;
        this.title = this.$t('page.index.Loading');
        // 加页码数
        this.page++;
        _this.getClassifyList();
      } else {
        // 其他时候把下拉刷新置为true
        _this.pullRefreshss = true;
        this.title = this.$t('page.index.Dropdowntoloadmore');
      }
    },
    goDetails: function (item) {
      console.log('item',item)
      this.$router.push({
        path: '/store/',
        query: { id: item.mer_id }
      });
    },
    goDetail: function (item) {
      console.log('item',item)
      if (item.product_type == 1) {
        this.$router.push({
          path: '/goods_seckill_detail/' + item.product_id,
          query: {
            time: item.stop_time
          }
        });
      } else {
        this.$router.push({
           path: '/goods_detail/' + item.product_id
        });
      }
    },
    goSeckillDetail: function (id, productId, time) {
      this.$router.push({
        path: '/goods_seckill_detail/' + productId,
        query: {
          time: time
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  input[type=checkbox]{
    accent-color: orange;
    color: #fff;
  }
.grey {
  color: #D0D0D0 !important;
}
.shoppingCart {
  cursor: pointer;
  // background-color: #F9F9F9;
  .noCart {
    text-align: center;
    .pictrue {
      width: 274px;
      height: 174px;
      margin: 111px auto 0 auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tip {
      font-size: 14px;
      color: #969696;
      margin-top: 20px;
    }
    .goIndex {
      width: 90px;
      height: 35px;
      border: 1px solid #282828;
      border-radius: 6px;
      text-align: center;
      line-height: 35px;
      font-size: 14px;
      color: #282828;
      margin: 24px auto 100px auto;
      display: block;
    }
  }
  .title {
    height: 59px;
    line-height: 59px;
    color: #999999;
    .home {
      color: #282828;
    }
  }
  .cartList {
    .header {
      height: 54px;
      background: #EEEEEE;
    }
    .allSelect {
      width: 70px;
      position: relative;
      .checkAll {
        margin-left: 30px;
      }
    }
    .info {
      width: 400px;
      padding-left: 30px;
    }
    .price {
      width: 215px;
    }
    .num {
      width: 150px;
    }
    .money {
      width: 270px;
    }
    .body {
      .storeCartList {
         //border: 1px dashed #EFEFEF;
        // background-color: #fff;
      }
      .item {
        & ~ .item {
           border-bottom: 1px dashed #E2E2E2;
        }
        height: 100px;
        margin: 15px 10px;
        border-bottom: 1px dashed #E2E2E2;
        .info {
          .pictrue {
            width: 80px;
            height: 80px;
            margin-right: 20px;
            margin-left: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            width: 220px;
            .infor {
              margin-top: 10px;
              font-size: 12px;
              color: #D0D0D0;
            }
          }
        }
        .price {
          font-size: 16px;
        }
        .num {
          .iconfont {
                width: 20px;
                height: 20px;
                line-height: 20px;
                border: 1px solid #f89900;
                text-align: center;
                color: #fff;
                background-color: #f89900;
                font-size: 9px;
                border-radius: 3px;
          }
          .numCon {
            width: 32px;
            height: 36px;
            border: 0;
            //border-top: 1px solid #D3D3D3;
            //border-bottom: 1px solid #D3D3D3;
            font-size: 15px;
            color: #5A5A5A;
            text-align: center;
            line-height: 36px;
            outline: none;
          }
        }
        .money {
          font-size: 16px;
        }
        .operate {
          color: #D0D0D0;
          .iconfont {
            font-size: 20px;
          }
        }
      }
    }
  }
  .store-info {
    padding: 0 20px;
    height: 73px;
    align-items: center;
    .checkbox-wrapper {
      padding-left: 28px;
    }
    .trader {
      display: inline-block;
      color: #fff;
      font-size: 12px;
      background-color: #E93323;
      width: 32px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      border-radius: 2px;
      margin-left: 7px;
    }
  }
  .invalid {
    margin-top: 20px;
    border-top: 1px solid #EFEFEF;
  }
  .footer {
    height: 62px;
    //background: #EEEEEE;
    //margin-top: 60px;
    //padding-left: 30px;
    // margin-bottom: 30px;
    // line-height: 62px;
    // display: flex;
    // justify-content: center;
    .allSelect {
      width: 70px;
      position: relative;
      display: inline-block;
      .checkAll {
        margin-left: 30px;
      }
    }
    .total {
      //font-size: 16px;
      .font-color {
        //font-size: 22px;
        font-weight: bold;
      }
    }
    .bnt {
      width: 120px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      font-size: 16px;
      color: #fff;
      margin-left: 30px;
      border-radius: 8px;
    }
  }
}
.jiajian{
  width: 18px;height: 18px;background-color: #f89900;text-align: center;display: inline-block;color: #fff;
}
.billLading{
  width: 108px;
      height: 76px;
      background-color:#f89900;
      border-radius: 40px 0 0 40px;
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-105%);
      flex-direction: column;
      padding-left: 15px;
      cursor: pointer;
      z-index: 999;
      line-height: 76px;
      text-align: center;
}
.billLading1{
  width: 108px;
      height: 76px;
      background-color:#f89900;
      border-radius: 40px 0 0 40px;
      position: fixed;
      right: 0;
      top: 50%;
      // transform: translateY(-50%);
      flex-direction: column;
      padding-left: 15px;
      cursor: pointer;
      z-index: 999;
      line-height: 40px;
      text-align: center;
      display: flex;
      align-items: center;
}
.btns{
        overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 67px;
            height: 23px;
            line-height: 23px;
            color: #f89900;
            border-radius: 3px;
            background-color: #fff;
            border: 1px solid #fff;
            padding: 0;
      }
.rest{
  width: 110px;
  height: 36px;
  text-align: center;
  line-height: 34px;
  background-color: #f89900;
  margin-top: 10px;
  // border: 1px solid #999999;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.rest1{
  width: 110px;
  height: 36px;
  text-align: center;
  line-height: 34px;
  background-color: #fff;
  margin-top: 10px;
  border: 1px solid #999999;
  border-radius: 4px;
  font-size: 14px;
  color: #999999;
  cursor: pointer;
}
// html,body{
//    position: fixed;
//    top: 0;
//    left: 0;
//    right: 0;
//    bottom: 0;
// }
.Mask{
  // position: fixed;
  //  top: 0;
  //  left: 0;
  //  right: 0;
  //  bottom: 0;
  // width: 100%;
  // height: 100%;
  // background-color: #ccc;
  // opacity: 0.5;
  // overflow-y: hidden;
}
.flexbox{
  width: 500px;
  height: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  border-radius: 5px;
  box-shadow: 10px 10px 5px #ccc;
  overflow-y: scroll;
}
  .flexbox::-webkit-scrollbar{
          width: 6px;
          height: 6px;
  }
  .flexbox::-webkit-scrollbar-thumb{
         border-radius: 2px;
         background:#c7c7c7;
  }
  .flexbox::-webkit-scrollbar-track{
         border-radius: 2px;
         background: #flflfl;
  }
.business{
  background-image: url(../utils/img/banberss.png);
      width: 1200px;
      margin: 0 auto;
      height: 352px;
      overflow: hidden;
      background-position: 50%;
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      justify-content: flex-end;
      p{
        color: #2e2e23;
        font-size: 42px;
      }
      h3{
        color: #fa3835;
        font-size: 42px;
      }
      .btn1{
            width: 130px;
            height: 45px;
            border-radius: 50px;
            line-height: 45px;
            background-color: #2e2e2e;
            color: #f1ce5a;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
            margin: 20px auto;
      }
}
.merchants{
  background-image: url(../utils/img/banneres.png);
  width: 1200px;
      margin: 0 auto;
      margin-bottom: 60px;
      height: 297px;
      overflow: hidden;
      background-position: 50%;
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: space-between;
  .download{
        width: 730px;
        font-weight: 700;
        margin-left: 10px;
        h3{
          font-size: 40px;
              letter-spacing: 2px;
              margin-left: 5px;
              font-weight: 700;
        }
       .tips{
             height: 35px;
             line-height: 35px;
             display: flex;
             font-size: 24px;
             margin-top: 10px;
             margin-left:5px;
       }
       .btn-content{
             display: flex;
             margin-top: 15px;
             margin-left: 5px;
           .items{
             height: 37px;
                 line-height: 37px;
                 background-color: #fff;
                 border-radius: 4px;
                 border: 1px solid #000;
                 display: flex;
                 font-size: 14px;
                 align-items: center;
                 justify-content: center;
                 padding: 5px;
                 will-change: filter;
                 transition: filter .5s;
                 cursor: pointer;
                 &:hover{
                   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
                   transition: all .2s;
                 }
           }
       }
  }
}
.iconbottom{
  max-width: 1200px;
  margin: 52px auto 107px auto;
  div{
    width: 300px;
    text-align: center;
    img{
     margin: 0 auto 20px;
    }
    span {
      margin-top: 20px;
    }
  }
}
.isfixed{
  position: fixed;
  top: 0;
  z-index: 99;
}
//分类动画效果
.transition{
  transition: all 0.5s ease-in-out 0s;
}
//轮播图
 .swiperRight{
   // display: flex;
   // flex-wrap: wrap;
   div{
     width: 242px;
     height: 152px;
     margin: 0 5px 5px 5px;
     // border: 1px solid #f89900;
   }
 }
 .swiperRight1{
   // display: flex;
   // flex-wrap: wrap;
   div{
     width: 242px;
     height: 152px;
     margin: 0 6px 6px 6px;
     // border: 1px solid #f89900;
   }
 }
// 推荐分类
.classificationOne{
  // animation: rowup 3s linear infinite normal;
  // animation: rowup 3s infinite;
  // @keyframes rowup {from{transform: translateX(0)}to{transform: translateX(-1270px);}

  transform: translateX(0);
  transition: transform 3s ease-out;
  }
.classification:hover {
  .classificationText {
    color: #f99900 !important;
  }
  & > .classificationImg {
    transition: all .2s;
    transform: scale(0.9);
    background-color: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(5px);
    z-index: 99;
    border: 1px solid #f99900 !important;
  }
}
// 推荐店铺
.RecommendedStores {
     cursor: pointer;
    &:hover{
      border: 1px solid #f99900 !important;
    }
}
.sort-scroll::-webkit-scrollbar {
  width: 0;
}
.sort-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sort-scroll::-webkit-scrollbar-thumb {
  background: transparent;
}

.sort-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

.floatWindow {
  position: fixed;
  right: 0;
  bottom: 15%;
  width: 70px;
  z-index: 99;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);

  .list {
    .item {
      position: relative;
      width: 100%;
      height: 74px;
      text-align: center;
      font-size: 12px;
      color: #5c5c5c;
      padding: 23px 0;
      line-height: 18px;

      &:hover {
        color: #e93323;
      }

      .iconfont {
        margin-bottom: 5px;
        font-size: 25px;
      }

      & ~ .item {
        &:before {
          position: absolute;
          content: " ";
          width: 48px;
          height: 1px;
          background-color: #f0f0f0;
          top: 0;
          left: 50%;
          margin-left: -24px;
        }
      }

      .itemCon {
        right: 100%;
        position: absolute;
        top: 0;
        padding-right: 20px;

        .ewm {
          width: 195px;
          height: 60px;
          border: 1px solid #eeeeee;
          background-color: #fff;
          padding: 10px 15px;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          align-items: center;
          color: #282828;

          .tip {
            font-size: 14px;
            width: 120px;
            text-align: left;
            line-height: 20px;
          }

          .pictrue {
            vertical-align: middle;

            .iconfont {
              margin-bottom: 0;
              color: #282828;
            }

            .arrow {
              position: absolute;
              right: 5px;
              top: 23px;
              width: 0px;
              height: 0px;
              border: 8px solid transparent;
              border-left-color: #eee;

              &:before {
                position: absolute;
                left: -8px;
                top: -7px;
                content: "";
                width: 0px;
                height: 0px;
                border: 7px solid transparent;
                border-left-color: #fff;
              }
            }
          }
        }
      }
    }
  }
}

.line2 {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  width: 170px;
  white-space: nowrap;
}

.categoryMain {
  background: #fff;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #eeeeee;
  .categoryBtn {
    width: 208px;
    height: 44px;
    line-height: 44px;
    color: #fff;
    // background-color: #e93323;
    text-align: center;
    cursor: pointer;
  }

  .item {
    padding: 14px 45px;
    margin-right: 13px;
    color: #282828;
    font-size: 15px;
    font-weight: 549;
    cursor: pointer;
    min-width: 90px;
    display: inline-block;
    text-align: center;

    &:hover {
      color: #f89921;
    }
  }
}

.index {
  .publicTitle {
    margin-top: 30px;

    .title {
      color: #8b8b8b;

      .pictrue {
        width: 110px;
        height: 30px;
        margin-right: 13px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .list-title .more,
  .publicTitle .more {
    width: 58px;
    height: 24px;
    // border: 1px solid #c6c6c6;
    color: #f89900;
    font-size: 12px;
    cursor: pointer;

    .iconfont {
      font-size: 10px;
    }
  }

  .wrapper {
    height: 320px;
    position: relative;
    cursor: pointer;

    .banner {
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .category {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      height: 100%;
    }

    .sort {
      width: 208px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      padding: 14px 0;

      .item {
        height: 39px;
        padding: 0 21px;

        .name {
          width: 150px;
        }

        .iconfont {
          font-size: 10px;
        }
      }

      &.sort-scroll {
        overflow-y: scroll;

        .name {
          width: 125px;
        }
      }
    }

    .sortCon {
      width: 664px;
      height: 100%;
      background-color: #fff;
      box-shadow: 5px 1px 10px rgba(0, 0, 0, 0.2);
      border: 1px solid #f2f2f2;
      border-left: 0;
      border-right: 0;
      padding: 20px 0;

      .title {
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f1f1;

        .font-color {
          padding-bottom: 8px;
          font-size: 16px;
          border-bottom: 2px solid #e93323;
        }
      }

      .erSort {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 400px;

        .item {
          -webkit-justify-content: space-between;
          justify-content: space-between;
          margin-bottom: 20px;

          .name {
            color: #282828;
            margin-left: 14px;
            text-align: right;
            width: 88px;
            font-weight: bold;

            &:hover {
              color: #e93323;
            }
          }

          .pictrue {
            width: 50px;
            height: 50px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .cateList {
          width: 525px;

          .cateItem {
            text-align: center;
            padding: 0 20px;
            display: inline-block;
            color: #888888;
            font-size: 12px;
            margin-bottom: 12px;

            &:hover {
              color: #e93323;
            }
          }
        }
      }
    }
  }

  .seckill {
    margin-top: 30px;

    .header {
      background: url("../assets/images/skillBg.jpg") no-repeat;
      background-size: 100% 100%;
      width: 208px;
      height: 266px;
      color: #fff;
      text-align: center;
      padding: 44px 0;
      font-size: 16px;

      .title {
        font-size: 28px;
        font-weight: bold;
      }

      .timeCurrent {
        margin-top: 20px;

        span {
          font-weight: bold;
        }
      }

      .lines {
        width: 17px;
        height: 2px;
        background: #ffffff;
        margin: 10px auto 0 auto;
      }

      .tip {
        margin-top: 10px;
      }

      .time {
        margin-top: 20px;
      }
    }

    .seckillList {
      width: 992px;
      height: 266px;
      background-color: #fff;
      position: relative;

      .item {
        cursor: pointer;
        display: inline-block;
        width: 248px;
        position: relative;
        padding: 21px 0;

        &:hover {
          .name {
            color: #e93323;
          }
        }

        .picTxt {
          width: 164px;
          margin: 0 auto;
        }

        & ~ .item:before {
          content: " ";
          position: absolute;
          width: 1px;
          height: 98px;
          background-color: #f4f4f4;
          top: 50%;
          margin-top: -49px;
        }

        .pictrue {
          width: 164px;
          height: 164px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          color: #282828;
          text-align: center;
          width: 164px;
          margin: 10px auto 0 auto;
        }

        .money {
          text-align: center;
          width: 164px;
          margin: 12px auto 0 auto;

          .font-color {
            font-weight: bold;
            font-size: 16px;
          }

          .y_money {
            color: #a3a3a3;
            text-decoration: line-through;
            margin-left: 6px;
          }
        }

        .ot_price {
          text-decoration: line-through;
          color: #a3a3a3;
          display: inline-block;
          margin-left: 2px;
        }
      }
    }
  }

  .boutique {
    .list {
      margin-top: 14px;

      .oneItem {
        padding: 28px;
        width: 586px;
        height: 250px;
        background: url("../assets/images/boutique1.jpg") no-repeat;
        background-size: 100% 100%;
        cursor: pointer;

        &:hover {
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
        }

        .text {
          width: 310px;

          .name {
            font-size: 18px;
            color: #282828;
          }

          .info {
            font-size: 16px;
            color: #a3a3a3;
            margin-top: 8px;
          }

          .money {
            margin-top: 26px;

            .font-color {
              font-size: 20px;
              font-weight: bold;
            }

            .y_money {
              color: #a3a3a3;
              margin-left: 12px;
              text-decoration: line-through;
            }
          }
        }

        .pictrue {
          width: 194px;
          height: 194px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .item {
        width: 287px;
        height: 250px;
        background: url("../assets/images/boutique2.jpg") no-repeat;
        background-size: 100% 100%;
        padding: 28px;
        position: relative;
        margin-left: 20px;
        cursor: pointer;

        &:hover {
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
        }

        .name {
          font-size: 18px;
        }

        .font-color {
          font-size: 20px;
          font-weight: bold;
          margin-top: 12px;
        }

        .y_money {
          color: #a3a3a3;
          text-decoration: line-through;
          margin-top: 4px;
        }

        .pictrue {
          width: 130px;
          height: 130px;
          position: absolute;
          right: 28px;
          bottom: 28px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .newGoods {
    .list {
      margin-top: 14px;

      .item {
        width: 185px;
        height: 330px;
        background-color: #fff;
        padding: 16px 16px 16px 16px;
        cursor: pointer;
        transform: scale(1);
        transition: all 1s;
        margin-right: 15px;
        margin-bottom: 20px;
        &:hover {
          transform: scale(1.1);
          transition: all 1s;
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
          border: 1px solid #f9ad33 !important;
        }

        .pictrue {
          // width: 162px;
          height: 162px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          margin-top: 12px;
        }

        .money {
          margin-top: 10px;
          display: flex;
          align-items: center;

          .label {
            background: url("../assets/images/label.jpg") no-repeat;
            background-size: 100% 100%;
            // width: 45px;
            height: 20px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            display: inline-block;
          }

          .font-color {
            font-size: 18px;
            font-weight: bold;
            margin-left: 10px;
          }

          .y_money {
            font-size: 12px;
            color: #a3a3a3;
            margin-left: 10px;
            text-decoration: line-through;
          }
        }

        .stock {
          color: #969696;
          font-size: 12px;
          margin-top: 14px;
        }

        & ~ .item {
          margin-left: 20px;
        }
      }
    }
  }

  .Recommended {
    margin-top: 40px;

    .publicTitle {
      margin-top: 0;
      padding: 0 27px;
      width: 100%;

      .moreBtn {
        float: right;
        width: 19px;
        height: 19px;
        text-align: center;
        border: 1.5px solid #e93323;
        border-radius: 100%;
        line-height: 19px;

        span {
          color: #e93323;
          font-size: 10px;
          font-weight: bold;
        }
      }
    }

    .title-text {
      font-weight: bold;
      color: #333333;
      font-size: 24px;
      margin-right: 10px;

      .color-red {
        color: #e93323;
      }
    }

    .title-intr {
      position: relative;
      top: 3px;
    }

    .list {
      width: 390px;
      height: 400px;
      padding: 26px 0;
      background-color: #fff;

      .list_count {
        padding: 0 27px;
        margin-top: 30px;
        cursor: pointer;

        .item {
          width: 100%;
          height: 136px;
          box-sizing: border-box;
          padding: 0 15px 0 20px;
          background: url("../assets/images/storeBg.png") no-repeat;
          align-items: center;
          /*定义body的元素垂直居中*/
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;

          &:first-child {
            margin-bottom: 14px;
          }
        }

        .hot-list {
          height: 84px;
          margin-bottom: 17px;
          background-image: none;

          &:last-child {
            margin-bottom: 0;
          }

          .top-num {
            width: 36px;
            height: 44px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .name {
            width: 136px;
          }

          .picture {
            width: 84px;
            height: 84px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .list-product {
        width: 183px;

        .name {
          color: #282828;
          font-size: 14px;
          line-height: 20px;
        }

        .trader {
          display: block;
          color: #e93323;
          font-size: 12px;
          border: 1px solid #e93323;
          max-width: 82px;
          margin-top: 7px;
          text-align: center;
          border-radius: 2px;
        }

        .attention-count {
          color: #8b8b8b;
          font-size: 13px;
          margin-top: 20px;
        }
      }

      .picture {
        width: 106px;
        height: 106px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }
      }

      & ~ .list {
        margin-left: 15px;
      }
    }

    .recommended-items {
      margin-top: 32px;

      .swiper-container {
        .recommend-text {
          opacity: 0;
        }

        .swiper-slide {
          display: block;
          width: 180px;
          height: 280px;
          margin-right: 15px;
          position: relative;
          top: 20px;
          transition: all 0.3s ease;

          img {
            width: 100%;
            height: 160px;
          }
        }

        .swiper-slide-active {
          top: 0;
          left: 0;

          .recommend-text {
            opacity: 1;
            position: absolute;
            width: 100%;
            text-align: center;
            bottom: 0;

            .name {
              color: #282828;
              font-size: 18px;
              line-height: 30px;
              margin-bottom: 10px;
            }

            .price {
              color: #e93323;
              font-size: 14px;
              font-weight: bold;

              span {
                font-size: 20px;
              }
            }
          }

          img {
            height: 180px !important;
          }
        }
      }
    }
  }

  .classify {
    width: 1200px;
    padding: 54px 0 10px 0;

    .list-title {
      font-size: 20px;
      color: #282828;
      margin-top: 30px;
    }

    .classify-title {
      width: 100%;
      height: 30px;
      background-image: url("../assets/images/classified-title.png");
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      text-align: center;

      span {
        display: inline-block;
        font-size: 22px;
        color: #333333;
        font-weight: bold;
      }
    }

    .list-count {
      margin-top: 15px;
      -webkit-justify-content: space-between;
      justify-content: space-between;
    }

    .classify-banner {
      width: 224px;
      height: 640px;
      margin-bottom: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .classify-items {
      width: 956px;

      .classify-item {
        width: 224px;
        height: 310px;
        padding: 16px;
        background: #fff;
        margin-right: 20px;
        margin-bottom: 20px;
        cursor: pointer;

        .picture {
          width: 192px;
          height: 192px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        &:nth-child(4n) {
          margin-right: 0;
        }

        &:hover {
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
        }
      }

      .item-text {
        margin-top: 10px;

        .item-name {
          color: #666666;
          font-size: 14px;
          line-height: 22px;

          .trader {
            color: #fff;
            background-color: #e93323;
            display: inline-block;
            // width: 32px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 2px;
            margin-right: 5px;
            font-size: 12px;
          }
        }

        .item-price {
          margin-top: 12px;
          -webkit-justify-content: space-between;
          justify-content: space-between;

          .price {
            color: #e93323;
            font-size: 18px;
            font-weight: bold;

            span {
              font-size: 14px;
            }
          }

          .coupon {
            position: relative;
            width: 20px;
            height: 20px;
            color: #e93323;
            text-align: center;
            border-radius: 2px;

            &:before {
              content: "";
              display: block;
              width: 20px;
              height: 20px;
              background: linear-gradient(330deg, #e75543 0%, #f46753 100%);
              border-radius: 2px;
              opacity: 0.14;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
      }
    }

    .list-banner {
      margin-top: 30px;
      width: 1200px;
      height: 120px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
